<template>
  <div >
    <div class="cuciao_banner">
      <carousel></carousel>
    </div>
    <div class="cuxiao_tab">
      <ul class="cuxiao_tab_main">
        <li class="danjian">茶叶</li>
        <li>红酒</li>
        <li>精品</li>
      </ul>
    </div>
    <div class="cuxiao_main">
      <h1 class="cuxiao_title">增值</h1>
      <h2 class="cuxiao_h2">珍品增值</h2>
      <cuxaiodel></cuxaiodel>
    </div>
    <foo-ter></foo-ter>
  </div>
</template>

<script type="text/javascript">
  import footer from "../footer/cuxiao.vue";
  import cuxaiodel from "../cuxiao/index.vue";
  import carousel from "../Carousel/Carousel.vue";
export default {
  name: 'cuxiao',
  data () {
    return {
      msg: 'I am cuxiao'
    }
  },
  components:{
    'foo-ter':footer,
    'carousel':carousel,
    'cuxaiodel':cuxaiodel
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.cuciao_banner{
  width: 100vw;
  height: 55.33vw;
  .banner_img{
    display: inline-block;
    width: 100vw;
    height: 55.33vw;
  }
}
.cuxiao_main{
  width: 100vw;
  .cuxiao_title{}
  .cuxiao_h2{}
}
.cuxiao_tab{
  width: 100vw;
  height: 12vw;
  .cuxiao_tab_main{
    width: 100%;
    height: 12vw;
    color: @color1;
    overflow: hidden;
    zoom:1;
    li{
      width: 33.3333%;
      display: inline-block;
      float: left;
      height: 12vw;
      line-height: 12vw;
      background-color: @color;
    }
    .danjian{
      background-color: @color6;
    }
  }
}
</style>